<template>
  <a-modal
    width="870px"
    v-drag
    :destroyOnClose="true"
    :maskClosable="false"
    :visible="visible"
    :zIndex="9999"
    :bodyStyle="{ padding: '1px', 'background-color': '#f0f2f5' }"
    :title="title"
    @cancel="cancel"
  >
    <a-row type="flex">
      <a-col flex="256px">
        <a-card class="eip-admin-card-small" size="small">
          <div slot="title" style="height: 32px; line-height: 32px">
            组织架构
          </div>
          <a-spin :spinning="organization.spinning">
            <div :style="{ height: height, overflow: 'auto' }">
              <a-directory-tree
                v-if="!organization.spinning"
                :default-expand-all="true"
                :tree-data="organization.data"
                @select="treeSelect"
              ></a-directory-tree>
            </div>
          </a-spin>
        </a-card>
      </a-col>

      <a-col flex="auto" style="margin-left: 1px">
        <a-spin :spinning="user.spinning">
          <a-card class="eip-admin-card-small" size="small">
            <div slot="title">{{ user.org }}人员</div>
            <div slot="extra">
              <a-space>
                <a-input-search
                  v-model="user.key"
                  placeholder="账号/姓名模糊查询..."
                  allowClear
                  style="width: 240px"
                />
                <a-button type="primary" @click="userAll">
                  <a-icon type="user" />查看所有人员
                </a-button>
              </a-space>
            </div>

            <div>
              <vxe-table
                row-id="userId"
                border
                id="chosenUser"
                ref="chosenUser"
                :data="users"
                @checkbox-change="selectChangeEvent"
                @checkbox-all="selectChangeEvent"
                :height="height"
                :checkbox-config="{
                  checkRowKeys: defaultSelecteRows,
                  trigger: 'row',
                  highlight: true,
                  range: true,
                  reserve: true,
                }"
                :tooltip-config="{ showAll: true }"
              >
                <vxe-table-column
                  type="seq"
                  title="序号"
                  width="60"
                ></vxe-table-column>
                <vxe-table-column
                  type="checkbox"
                  width="40"
                  align="center"
                ></vxe-table-column>
                <vxe-table-column
                  field="code"
                  title="账号"
                  width="120"
                ></vxe-table-column>
                <vxe-table-column
                  field="name"
                  title="姓名"
                  width="120"
                ></vxe-table-column>
                <vxe-table-column
                  field="sex"
                  title="性别"
                  width="60"
                  align="center"
                >
                  <template v-slot="{ row }">
                    <a-tag color="red" v-if="row.sex == 1">女</a-tag>
                    <a-tag color="green" v-else>男</a-tag>
                  </template>
                </vxe-table-column>
                <vxe-table-column
                  field="parentIdsName"
                  title="组织"
                  showOverflow="ellipsis"
                ></vxe-table-column>
              </vxe-table>
            </div>
          </a-card>
        </a-spin>
      </a-col>
    </a-row>
    <template slot="footer">
      <a-space>
        <a-button key="back" @click="cancel" :disabled="loading"
          ><a-icon type="close" />取消</a-button
        >
        <a-button key="submit" @click="save" type="primary" :loading="loading"
          ><a-icon type="save" />提交</a-button
        >
      </a-space>
    </template>
  </a-modal>
</template>

<script>
import { organization, user } from "@/services/common/usercontrol/chosenuser";
export default {
  name: "eip-chosen-user",
  data() {
    return {
      height: "500px",
      organization: {
        data: [],
        spinning: true,
      },
      defaultSelecteRows: [],
      selectRows: [],
      user: {
        org: "",
        data: [],
        key: "",
        orgId: "",
        spinning: false,
      },
      loading: false,
    };
  },
  computed: {
    users() {
      var arr = [];
      this.user.data.forEach((item) => arr.push(item));
      if (this.user.key) {
        arr = this.user.data.filter(
          (item) =>
            item.name.includes(this.user.key) ||
            item.code.includes(this.user.key)
        );
      }
      if (this.user.orgId) {
        arr = this.user.data.filter((item) =>
          item.organizationId.includes(this.user.orgId)
        );
      }
      if (this.user.key && this.user.orgId) {
        arr = this.user.data.filter(
          (item) =>
            item.name.includes(this.user.key) &&
            item.organizationId.includes(this.user.orgId)
        );
      }
      return arr;
    },
  },

  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    topOrg: {
      type: String,
    },
    title: {
      type: String,
    },
    chosen: {
      type: Array,
    }, //已选中对象,编辑传入
  },
  mounted() {
    this.organizationInit();
    this.userInit();
  },
  methods: {
    /**
     *
     * @param {*} param0
     */
    selectChangeEvent(e) {
      if (e.checked) {
        e.records.forEach((f) => {
          f.exist = true;
        });
      } else {
        this.user.data.forEach((f) => (f.exist = false));
        e.reserves.forEach((f) => {
          f.exist = true;
        });
      }
    },

    /**
     * 树选中
     */
    treeSelect(electedKeys, e) {
      this.user.orgId = electedKeys[0];
      this.user.org = e.selectedNodes[0].title;
    },
    /**
     * 取消
     */
    cancel() {
      this.$emit("update:visible", false);
    },

    /**
     * 组织架构树
     */
    organizationInit() {
      let that = this;
      that.organization.spinning = true;
      organization().then((result) => {
        that.organization.data = result.data;
        that.organization.spinning = false;
      });
    },

    /**
     * 初始化人员
     */
    userInit() {
      let that = this;
      that.user.spinning = true;
      user({ topOrg: this.topOrg }).then((result) => {
        that.selectRows = [];
        that.user.data = result.data;
        that.user.spinning = false;

        if (that.chosen) {
          that.defaultSelecteRows = that.chosen.map((m) => m.id);
          that.user.data.forEach((item) => {
            item.exist =
              that.chosen.filter((f) => f.id == item.userId).length > 0;
          });
        }
      });
    },

    /**
     * 所有用户
     */
    userAll() {
      this.user.key = "";
      this.user.orgId = "";
      this.user.org = "所有";
    },

    /**
     * 用户选择
     */
    userCheck(user) {
      user.exist = !user.exist;
    },

    /**
     * 保存
     */
    save() {
      this.selectRows = this.user.data.filter((f) => f.exist);
      this.$emit("ok", this.selectRows);
      this.cancel();
    },
  },
};
</script>

<style lang="less" scoped>
</style>
